layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#colorBoard-bg',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      $('#webPage').find('.builder-info').css('background', color)
    }
  });
});
layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#colorBoard-font',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      $('#webPage').find('.builder-info').css('color', color)
    }
  });
});
layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#colorBoard-line',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      let co = '0.04rem solid' + color + ''
      $('#webPage').find('.builder-info').css('border', co)
      $('#webPage').find('.b-i-content').css('border', co)
    }
  });
});


layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#title-colorBoard-bg',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      $('#webPage').find('.builder-title').css('background', color)
    }
  });
});
layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#title-colorBoard-font',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      $('#webPage').find('.builder-title').css('color', color)
    }
  });
});

layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#custom-colorBoard-bg',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      $('#webPage').find('.builder-custom').css('background', color)
    }
  });
});
layui.use('colorpicker', function(){
  var colorpicker = layui.colorpicker;
  colorpicker.render({
    elem: '#custom-colorBoard-font',
    predefine: true,
    colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)'],
    change: function (color) {
      $('#webPage').find('.builder-custom').css('color', color)
    }
  });
});